<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>13_Promise的几个关键问题5</title>
</head>

<body>
  <script>
    // 中断Promise链:
    //    (1) 当使用 Promise的then链式调用时, 在中间中断, 不在调用后面的回调函数
    //    (2) 办法: 在失败的回调函数中返回一个 pending状态的 Promise实例

    function sendAjax(url, data) {
      return new Promise((resolve, reject) => {
        // 实例 xhr
        const xhr = new XMLHttpRequest();
        // 绑定监听
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);
            else reject('请求出了点问题');
          }
        };
        // 整理参数
        let str = '';
        for (let key in data) {
          str += `${key}=${data[key]}&`;
        };
        str = str.slice(0, -1);
        // 配置请求
        xhr.open('GET', url + '?' + str);
        xhr.responseType = 'json';
        // 发送请求
        xhr.send();
      });
    };

    // 发送第 1 次请求
    sendAjax('https://api.apiopen.top/api/getShortVideo', { page: 1, size: 10 })
    .then(
      (value) => {
        console.log('成功了1:', value);
        return sendAjax('https://api.apiopen.top/api/getShortVideo1', { page: 1, size: 10 });
      },
      (reason) => {
        console.log('失败了1:', reason)
        return new Promise(() => {})    // 中断 Promise链
      },
    )
    .then(
      (value) => {
        console.log('成功了2:', value);
        return sendAjax('https://api.apiopen.top/api/getShortVideo', { page: 1, size: 10 });
      },
      (reason) => {
        console.log('失败了2:', reason)
        return new Promise(() => {})    // 中断 Promise链
      },
    )
    .then(
      (value) => { console.log('成功了3:', value) },
      (reason) => { console.log('失败了3:', reason) },
    );
  </script>
</body>

</html>